{% extends "base.html" %}

{% block title %}本地影院 - SkitPanel 短剧管理面板{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/local_cinema.css') }}">
{% endblock %}

{% block content %}
    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 页面标题和说明 -->
        <div class="mb-6">
            <h2 class="text-2xl font-bold text-dark mb-2">本地影院</h2>
            <p class="text-gray-600">浏览和播放您的本地短剧资源</p>
        </div>
        
        <!-- 视频播放器区域 -->
        <section class="bg-white rounded-xl shadow-lg p-6 mb-8 card-shadow">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-semibold text-dark"><i class="fa fa-play-circle text-primary mr-2"></i>播放窗口</h3>
                <div class="flex space-x-2">
                    <button id="toggle-fullscreen" class="text-gray-600 hover:text-primary p-2 rounded-full hover:bg-gray-100 transition-colors" title="全屏">
                        <i class="fa fa-expand"></i>
                    </button>
                    <button id="refresh-player" class="text-gray-600 hover:text-primary p-2 rounded-full hover:bg-gray-100 transition-colors" title="刷新">
                        <i class="fa fa-refresh"></i>
                    </button>
                </div>
            </div>
            
            <!-- 播放器容器 -->
            <div class="aspect-video bg-black rounded-lg overflow-hidden flex items-center justify-center relative" id="video-player-container">
                <div id="no-video-message" class="text-center text-white p-6">
                    <i class="fa fa-film text-4xl text-gray-400 mb-4"></i>
                    <p class="text-lg text-gray-300">请从下方列表中选择一个视频进行播放</p>
                </div>
                <!-- 视频播放器将通过JS动态插入 -->
                <video id="video-player" class="hidden w-full h-full object-contain" controls></video>
            </div>
            
            <!-- 当前播放信息 -->
            <div id="current-playback-info" class="mt-4 hidden">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <h4 id="current-video-title" class="font-medium text-dark"></h4>
                    <div class="flex items-center space-x-4">
                        <button id="prev-video-btn" class="text-gray-600 hover:text-primary transition-colors flex items-center" title="上一个视频">
                            <i class="fa fa-step-backward mr-1"></i> 上一个
                        </button>
                        <button id="next-video-btn" class="text-gray-600 hover:text-primary transition-colors flex items-center" title="下一个视频">
                            <i class="fa fa-step-forward mr-1"></i> 下一个
                        </button>
                        <span id="current-video-duration" class="text-sm text-gray-500"></span>
                        <span id="current-video-size" class="text-sm text-gray-500"></span>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 资源搜索和列表区域 -->
        <section class="bg-white rounded-xl shadow-lg p-6 card-shadow">
            <!-- 搜索和筛选工具栏 -->
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
                <div class="relative flex-grow">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                        <i class="fa fa-search text-gray-400"></i>
                    </div>
                    <input type="text" id="video-search" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="搜索视频...">
                </div>
                <div class="flex space-x-3">
                    <select id="sort-option" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all bg-white">
                        <option value="name_asc">名称 (升序)</option>
                        <option value="name_desc">名称 (降序)</option>
                        <option value="modified_asc">修改时间 (升序)</option>
                        <option value="modified_desc">修改时间 (降序)</option>
                        <option value="size_asc">文件大小 (升序)</option>
                        <option value="size_desc">文件大小 (降序)</option>
                    </select>
                    <button id="refresh-btn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center">
                        <i class="fa fa-refresh mr-2"></i>刷新
                    </button>
                </div>
            </div>
            
            <!-- 当前路径导航 -->
            <div class="mb-4 text-sm text-gray-600 flex justify-between items-center">
                <div class="flex items-center">
                    <span>当前路径：</span>
                    <span id="current-path-display">/app/skit</span>
                </div>
                <button id="go-up-btn" class="px-3 py-1 bg-primary text-white rounded hover:bg-primary/90 transition-colors flex items-center" title="返回上一级">
                    <i class="fa fa-arrow-left mr-1"></i> 返回
                </button>
            </div>
            
            <!-- 资源列表 -->
            <div class="overflow-x-auto">
                <table class="w-full min-w-[640px]" id="videos-table">
                    <thead>
                        <tr class="bg-gray-50 text-left text-gray-600">
                            <th class="px-4 py-3 font-semibold">名称</th>
                            <th class="px-4 py-3 font-semibold">类型</th>
                            <th class="px-4 py-3 font-semibold">大小</th>
                            <th class="px-4 py-3 font-semibold">修改时间</th>
                            <th class="px-4 py-3 font-semibold">操作</th>
                        </tr>
                    </thead>
                    <tbody id="videos-table-body">
                        <!-- 视频列表将通过JS动态添加 -->
                    </tbody>
                </table>
            </div>
            
            <!-- 加载状态 -->
            <div id="loading-indicator" class="hidden py-10 text-center">
                <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
                <p class="mt-3 text-gray-600">加载中...</p>
            </div>
            
            <!-- 空状态 -->
            <div id="empty-state" class="hidden py-16 text-center">
                <div class="inline-block p-4 bg-gray-100 rounded-full mb-4">
                    <i class="fa fa-film text-gray-400 text-2xl"></i>
                </div>
                <p class="text-gray-500">没有找到视频文件</p>
            </div>
        </section>
    </main>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='js/local_cinema.js') }}"></script>
{% endblock %}